2.vue 使用vue |
您所在的位置:网站首页 › el table高度 › 2.vue 使用vue |
问题描述: image.png image.png1.寻找问题出现原因 为什么会出现这种情况,打开控制台查看代码 原来是el-table 会计算100%宽度为具体多少px 然后再计算出每一列的宽度 通过设置table>colgroup>col 的width属性来设置每一列的宽度。问题是浏览器的打印区域的100%的具体px如这里的1495px肯定与打印纸的宽度不一致 所以导致部分区域打印不出来 image.png image.png2.解决思路 那就把col这里的具体宽度设置成百分比就OK了。 2.1首先看能不能从element 着手,但是element 的table有设置Table-column Attributes 的width属性 但是是px不是百分百。 2.2既然element不行 那就从vue-print-nb 着手,首先 我们要清楚print的原理其实就是将我们要打印的id包裹的内容(其实是生成图片)放到一个iframe 然后再打印。那我们就走打印之前修改这些table>colgroup>col 属性的width 。来看看他的钩子回调函数 image.png github地址:https://github.com/Power-kxLee/vue-print-nb image.png image.png image.png结果是这些钩子函数的回调都是在插入 iframe后才调用。而我们需要修改的是iframe的样式,去使table表格能打印完全 3.修改源码。 首先我们要写一些样式覆盖原来的table的宽度样式 确保宽度不是一个具体的px 3.1.先安装 vue-print-nb插件 npm install vue-print-nb --save解决上述问题因为要改源码,所以在依赖里找到这个文件,单独拿出来,然后再main.js引用一下 image.png image.png #main.js import Print from './assets/print' Vue.use(Print);3.2 所有的钩子函数都在这里 那我们按照他的其他钩子回调的样式 添加一个钩子函数(beforeEntryIframe函数),因为我需要在钩子函数里对克隆的dom对象做处理,所以还传了一个参数 image.pngprintarea.js文件中会有调用这里的定义的回调函数,我们想在iframe插入内容之前修改,那就要在插入之前执行我们新加的钩子函数。 image.png image.png image.png image.png3.3.给要打印的区域的容器绑定id,在打印按钮上绑定v-print image.png image.png在钩子函数beforeEntryIframe中对ele做处理 export default { name: "Report", data() { return { printStatus: true, printObj: { id: "printArea", popTitle: "打印", // 打印配置页上方标题 extraHead: ',#printArea {width:100%;}', //最上方的头部文字,附加在head标签上的额外标签,使用逗号分隔 preview: "", // 是否启动预览模式,默认是false(开启预览模式,可以先预览后打印) previewTitle: "", // 打印预览的标题(开启预览模式后出现), previewPrintBtnLabel: "", // 打印预览的标题的下方按钮文本,点击可进入打印(开启预览模式后出现) zIndex: "", // 预览的窗口的z-index,默认是 20002(此值要高一些,这涉及到预览模式是否显示在最上面) beforeEntryIframe(copy) { // copy是ele对象的深度拷贝,修改copy对象不会更改页面中table表格的样式,只会更改打印预览生成的表格的样式 const cells = copy.querySelectorAll('.cell'); const tableNode = copy.querySelectorAll('.el-table__header,.el-table__body'); ;[].slice.call(cells).forEach(item => { // 为了让表格中的内容自动换行,不需要的话可以删掉 item.style.whiteSpace = 'pre-wrap' }) // el-table打印不全的问题 ;[].slice.call(tableNode).forEach(item => { item.style.width = '100%'; const child = item.childNodes; ;[].slice.call(child).forEach(element => { if(element.localName === 'colgroup') { element.innerHTML = '' } }) }) }, previewBeforeOpenCallback() { }, //预览窗口打开之前的callback(开启预览模式调用) previewOpenCallback() { }, // 预览窗口打开之后的callback(开启预览模式调用) beforeOpenCallback() { }, // 开启打印前的回调事件 openCallback() { }, // 调用打印之后的回调事件 closeCallback() { this.printStatus = false; }, //关闭打印的回调事件(无法确定点击的是确认还是取消) url: "", standard: "", extraCss: "", }, }; }, methods: { handlePrint() { this.printStatus = true; } }, };至此js文件修改完毕,点击打印按钮发现已经可以展示全,而且还可以换行展示 image.png———————————————— 本文参考CSDN博主「Mr.LiLong」的原创文章 原文链接:https://blog.csdn.net/qq_43086723/article/details/127092795 本文参考CSDN博主「梁毅」的原创文章 原文链接:[https://blog.csdn.net/liangyiyiliang/article/details/124451553] |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |